/*
    Created on : Sep 19, 2014, 2:01:43 PM
    Author     : @arboshiki
*/

.lobibox-notify-wrapper{
    z-index: 5000;
    position: fixed;
    &.top{
        top: @lobibox-notify-wrapper-offset-top;
    }
    &.bottom{
        bottom: @lobibox-notify-wrapper-offset-bottom;
    }
    &.left{
        left: @lobibox-notify-wrapper-offset-left;
        margin-right: @lobibox-notify-wrapper-offset-left;
    }
    &.right{
        right: @lobibox-notify-wrapper-offset-right;
        margin-left: @lobibox-notify-wrapper-offset-right;
        .lobibox-notify{
            margin-left: auto;
        }
    }
}
.lobibox-notify-wrapper-large{
    z-index: 5000;
    position: fixed;
    &.top{
        top: @lobibox-notify-wrapper-offset-top;
    }
    &.bottom{
        bottom: @lobibox-notify-wrapper-offset-bottom;
    }
    &.left{
        left: @lobibox-notify-wrapper-offset-left;
        .nav-tabs{
            >li{
                float: left;
            }
        }
    }
    &.right{
        right: @lobibox-notify-wrapper-offset-right;
    }
    
    
    .nav-tabs{
        border: none;
        background-color: transparent;
        margin-bottom: -7px;
        >li{
            float: right;
            >a{
                margin-bottom: 2px;
                border-radius: 0;
                padding: 0;
                text-align: center;
                font-size: 18px;
                height: 32px;
                display: table;
                color: #FFF;
                margin-right: 0;
                margin-left: 2px;
                border: 1px solid transparent;
                width: 28px;
                opacity: 0.6;
                &:hover,
                &:active,
                &:focus,
                &:hover:active{
                    color: #FFF;
                    cursor: pointer;
                    border: 1px solid transparent;
                }
                .tab-control-icon{
                    display: table-cell;
                    vertical-align: middle;
                    /*line-height: 30px;*/
                }
            }
            &.lobibox-notify-error{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-danger-bg);
                }
            }
            &.lobibox-notify-success{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-success-bg);
                }
            }
            &.lobibox-notify-warning{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-warning-bg);
                }
            }
            &.lobibox-notify-info{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-info-bg);
                }
            }
            &.active{
                >a{
                    opacity: 1;
                }
            }
        }
    }
    .tab-content{
        background-color: transparent;
        padding: 0;
        border: none;
        .lobibox-notify{
            min-height: @lobibox-notify-large-height;
            .lobibox-notify-icon{
                width: @lobibox-notify-large-icon-width;
                font-size: @lobibox-notify-large-icon-font-size;
                &, &>*{
                    line-height: @lobibox-notify-large-icon-width;
                }
            }
            .lobibox-notify-body{
                margin: @lobibox-notify-large-body-margin-vertical @lobibox-notify-large-body-margin-horizontal;
                margin-left: 2 * @lobibox-notify-icon-left + @lobibox-notify-large-icon-width;
            }
        }
    }
}

.lobibox-notify{
    position: relative;
    min-height: @lobibox-notify-min-height;
    font-family: @lobibox-notify-font-family;
    margin: @lobibox-notify-margin-vertical 0;
    border-radius: @lobibox-notify-border-radius;
    border: @lobibox-notify-border-width solid @lobibox-notify-border-color;
    .box-shadow(@lobibox-notify-box-shadow);
    .transition(all @lobibox-notify-transition-duration);
    .lobibox-notify-icon{
        position: absolute;
        text-align: center;
        font-size: @lobibox-notify-icon-font-size;
        left: @lobibox-notify-icon-left;
        top: @lobibox-notify-icon-top;
        width: @lobibox-notify-icon-width;
        &, &>*{
            line-height: @lobibox-notify-icon-width;
        }
        img{
            border-radius: @lobibox-notify-img-border-radius;
            width: 100%;
            height: 100%;
        }
    }
    .lobibox-notify-body{
        margin: @lobibox-notify-body-margin-vertical @lobibox-notify-body-margin-horizontal;
        margin-left: @lobibox-notify-icon-left * 2 + @lobibox-notify-icon-width;
    }
    .lobibox-notify-title{
        font-size: @lobibox-notify-title-font-size;
    }
    .lobibox-close{
        position: absolute;
        text-align: center;
        border-radius: 50%;
        right: @lobibox-notify-close-offset-right;
        top: @lobibox-notify-close-offset-top;
        font-size: @lobibox-notify-close-font-size;
        line-height: @lobibox-notify-close-size;
        .square(@lobibox-notify-close-size);
        .transition(all @lobibox-notify-transition-duration);
        &:hover{
            background-color: @lobibox-notify-close-hover-bg;
            font-weight: bold;
        }
    }
    .lobibox-delay-indicator{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: @lobibox-notify-delay-indicator-height;
        >div{
            position: relative;
            height: 100%;
            width: 0%;
            background-color: @lobibox-notify-delay-indicator-bg;
        }
    }

    &.lobibox-notify-error{
        .lobibox-notify-variant(@lobibox-notify-danger-bg; @lobibox-notify-danger-color);
    }
    &.lobibox-notify-success{
        .lobibox-notify-variant(@lobibox-notify-success-bg; @lobibox-notify-success-color);
    }
    &.lobibox-notify-warning{
        .lobibox-notify-variant(@lobibox-notify-warning-bg; @lobibox-notify-warning-color);
    }
    &.lobibox-notify-info{
        .lobibox-notify-variant(@lobibox-notify-info-bg; @lobibox-notify-info-color);
    }
    
    &:hover{
        cursor: pointer;
        .box-shadow(@lobibox-notify-hover-box-shadow);
    }
    &.notify-mini{
        min-height: @lobibox-notify-mini-min-height;
        .lobibox-notify-title{
            margin-top: -5px;
            font-size: @lobibox-notify-mini-title-font-size;
            line-height: @lobibox-notify-mini-title-line-height;
        }
        .lobibox-notify-msg{
            line-height: @lobibox-notify-mini-msg-line-height;
        }
        .lobibox-notify-icon{
            left: @lobibox-notify-mini-icon-left;
            width: @lobibox-notify-mini-icon-width;
            font-size: @lobibox-notify-mini-icon-font-size;
            &, &>*{
                line-height: @lobibox-notify-mini-icon-line-height;
            }
            img{
                margin-top: -5px;
            }
        }
        .lobibox-notify-body{
            margin: @lobibox-notify-mini-body-margin-vertical @lobibox-notify-mini-body-margin-horizontal;
            margin-left: 2 * @lobibox-notify-mini-icon-left + @lobibox-notify-mini-icon-width;
        }
    }
    &.without-icon{
        .lobibox-notify-body{
            margin-left: @lobibox-notify-body-margin-horizontal;
        }
    }
}